<template>
    <div style='margin-left: 20px;width:790px'>
      <!-- 分页 -->
      <div class='tab_company_out'>
        <div style="float: right;margin-right: 20px" >No:{{tableData.paymentNo}}</div>
        <div class="title">{{tableData.companyName}}<span style="padding-left: 10px">资金支付审批单</span></div>
        <div class='dan'><span></span></div>
        <p style="width:790px;">
          <span class="left" v-if="tableData.deptName" style="float:left;width:320px;text-align:left">申请部门：{{tableData.deptName}}</span>

          <span class="right" style="float:right;text-align:right">申请日期: {{tableData.createTime}}</span>
        </p>
        <table cellpadding='0' cellspacing='0' style="width:790px;float: left;margin-bottom: 8px">
          <tr>
            <td class="label" width='10%'>收款单位</td>
            <td width='55%' class="value">{{tableData.unitName}}</td>
            <td class="label" width='10%'>收款人</td>
            <td width='25%' class="value">{{tableData.linkMan}}</td>
          </tr>
          <tr style="height: 50px">
            <td class="label">付款事项</td>
            <td colspan="3" class="value">{{tableData.title}}</td>
          </tr>
          <tr>
            <td class="label" >开户行</td>
            <td class="value" >{{tableData.bankName}}</td>
            <td class="label" >账号</td>
            <td class="value" >{{tableData.bankNo}}</td>
          </tr>
          <tr>
            <td class="label">申请金额</td>
            <td class="value">{{chineseTotal}} ¥{{tableData.amount}}</td>
            <td class="label">批准金额</td>
            <td class="value">{{tableData.amount}}</td>
          </tr>
          <tr>
            <td class="label">备注</td>
            <td colspan='3' class="value">{{tableData.remark}}</td>
          </tr>
        </table>
      <div class="text" style='margin-top: -55px'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        <ul class='lu'>
          <li>申请人：
            <label>{{tableData.nickName}}</label>
          </li>
          <li>部门经理：
            <label>{{tableData.nickName_nqbz}}</label>
          </li>
          <li>会计：
            <label>{{tableData.nickName_kj}}</label>
          </li>
          <li>财务：
            <label>{{tableData.nickName_cwbz}}</label>
          </li>
<!--          <li>营销总监：-->
<!--            <label></label>-->
<!--          </li>-->
          <li>总经理：
            <label>{{tableData.nickName_zjl}}</label>
          </li>
        </ul>
      </div>
    </div>
</template>


<script>
export default {
  name: 'PaymentPrint',
  // 制作打印模版组件时，props区域尽量保留。
  props: {
    // 接受的打印数据
    tableData: {
      type: Object,
      default() {
        return {
          paymentNo: '',
          deptName: '',
          amountDate: '',
          amount: 0
        }
      }
    },

    // 每页多少行
    onePageRow: {
      type: Number,
      default: 5
    },
    // 是否插入空白行
    blankLines: {
      type: Boolean,
      default: true
    },

    getChineseNumber: Function // 求数字的中文写法，从easyPrint组件传入
  },
  data() {
    return {}
  },

  computed: {

    chineseTotal() {
      // 计算中文合计，如果忘记传入
      return this.getChineseNumber != null ? this.getChineseNumber(this.tableData.amount) : '您还没有传入getChineseNumber'
    }
  },

  methods: {
    test() {
      console.log('test')
    }
  }
}
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
  font-color:#000000;
  color: #000000;
  list-style-type: none;
  font-family: "微软雅黑";
  font-size: 14px;
}

@page {
  size: auto;
  margin: 1mm;
}
.text{
  float: right;
  letter-spacing:1px;
  font-size: 7px;
  width: 12px;
}
.tab_company_out {
  text-align: center;
  width: 790px;
  page-break-after: always;
}

.value {
  text-align: left;
  width: 100px;
  padding-left: 10px;
}

.title {
  font-size: 17px;
  padding-left: 16%;
  font-weight: bold;
}

.dan {
  text-align: center;
  position: relative;
}


.dan span {
  position: absolute;
  right: 0;
}

p {
  overflow: hidden;
  padding: 10px 0;
}


p span ins {
  text-decoration: underline;
}

table {
  width: 100%;
  border: none;
  border-bottom: 1px solid #000;
}

table tr td {
  border: 1px solid #000;
  border-bottom: none;
  border-right: none;
  height: 28px;
  text-align: center;
  line-height: 28px;
}

table tr td:last-of-type,
table tr th:last-of-type {
  border-right: 1px solid #000;

}

table tr th {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  height: 22px;
  line-height: 22px;
  font-size: 14px;
}

table tr th:nth-child(2) {
  width: 0;
}

.lu{
  padding-left: 10px;
}

.lu li {
  float: left;
  text-align: left;

  width: calc(765px / 5);

}

.lu li label {
  width: 70px;
  display: inline-block;
}


/*.lu li:last-of-type {*/
/*margin-right: 20px;*/
/*float: right;*/
/*text-align: left;*/
/*}*/


</style>